<template>
  <div class="content">
    <el-button @click="returnArea">返回上一级</el-button>
    <div ref="charts" id="3dMap" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script src="./geoAtlasJson.js"></script>
<script>
import * as echarts from "echarts";
import allAreaCode from "@/utils/areas.js";
export default {
  props: {
    list: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      option: {
        title: {
          //标题样式
          text: "",
          x: "center",
          textStyle: {
            fontSize: 18,
            color: "red",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.name) {
              return (
                params.name +
                " : " +
                (isNaN(params.value) ? 0 : parseInt(params.value))
              );
            }
          },
        },
        visualMap: {
          //视觉映射组件
          top: "bottom",
          left: "left",
          min: 1,
          max: 100,
          //text: ['High', 'Low'],
          realtime: false, //拖拽时，是否实时更新
          calculable: true, //是否显示拖拽用的手柄
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            type: "map",
            mapType: "china",
            roam: true, //是否开启鼠标缩放和平移漫游
            itemStyle: {
              //地图区域的多边形 图形样式
              normal: {
                //是图形在默认状态下的样式
                label: {
                  show: true, //是否显示标签
                  textStyle: {
                    color: "black",
                  },
                },
              },
              zoom: 1.5, //地图缩放比例,默认为1
              emphasis: {
                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: { show: true },
              },
            },
            top: "8%", //组件距离容器的距离
            data: this.list,
          },
        ],
      },
      mapEcharts: "",
      historyList: [{ name: "中国", code: 100000 }], //钻出层数
    };
  },
  methods: {
    returnArea() {
      if (this.historyList.length == 1) {
        this.loadMap(100000);
        this.$emit("getAtlasData", { name: "中国", level: 0 });
        return;
      } else {
        this.historyList = this.historyList.slice(0, -1);
        this.$emit("getAtlasData", {
          name: this.historyList[this.historyList.length - 1].name,
          level: this.historyList.length - 1,
        });
        this.loadMap(this.historyList[this.historyList.length - 1].code);
      }
    },
    //请求地图数据
    async loadMap(areaCode, notFirstLoad = true) {
      const res = await fetch(
        `https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`
      );
      const [err, data] = await res
        .json()
        .then((data) => [null, data])
        .catch((err) => [err, null]);
      if (data) {
        if (notFirstLoad) {
          echarts.dispose(this.mapEcharts);
        }
        this.initMap(areaCode, data);
      }
      if (err && this.historyList.length > 1) {
        this.historyList = this.historyList.slice(0, -1);
      }
    },
    // 地图初始化
    initMap(mapName, mapData) {
      this.mapEcharts = echarts.init(document.getElementById("3dMap"));
      // 注册地图
      echarts.registerMap(mapName, mapData);

      this.option.series[0].data = this.list;
      this.option.series[0].map = mapName;
      this.mapEcharts.setOption(this.option);

      this.mapEcharts.off("click");
      this.mapEcharts.on("click", (params) => {
        //通过城市名称找到对应城市编码
        const item = allAreaCode.find((i) => i.name === params.name);
        if (item) {
          if (this.historyList.length > 2) {
            return;
          }
          this.historyList.push({ name: item.name, code: item.adcode });
          this.$emit("getAtlasData", {
            name: item.name,
            level: this.historyList.length - 1,
          });
        }
      });
    },

    upData(e) {
      this.$nextTick(() => {
        this.loadMap(this.historyList[this.historyList.length - 1].code, e);
      });
    },
  },
};
</script>
